<template>
	<view class="container">
		<view class="search_box">
			<view class="search">
				<text class="search_btn" @click="handleClickSearch">
					<image mode="aspectFill" src="../../static/company/icon_search.png"></image>
				</text>
				<input type="text" placeholder="请输入您要选择的公司名称" v-model="search" />
				<view v-if="search" class="clear_btn" @click="clear()">
					<icon type="clear" size="16"/>
				</view>
				
			</view>
		</view>
		<view v-if="search" class="list">
			<view v-for="(item, index) in resList" :key="index" class="list_item" @click="selectItem(item)" :style="index>0?'border-top:1rpx solid #e5e5e5;':''">
				{{item.enterpriseName}}
			</view>
		</view>
		<view v-else class="list">
			<view v-for="(item, index) in companyList" :key="index" class="list_item" @click="selectItem(item)" :style="index>0?'border-top:1rpx solid #e5e5e5;':''">
				{{item.enterpriseName}}
			</view>
		</view>
	</view>
</template>

<script>
	import { companyList } from '@/api/app.js'
	export default{
		components:{
			
		},
		data(){
			return{
				currentMes: [],
				isLoadMore: false,
				hasMore: false,
				companyList: [],
				resList: [],
				search: '',
			}
		},
		watch: {
			// 搜索框key变化 触发查询
			search: function (newData, oldData) {
					if(newData.trim() != '' && newData != oldData){
					this.resList = this.searchvalue(this.companyList, newData.trim())
					}
				}
		},
		onLoad(options) {
			this.getCompanyList(options.idCard)
		},
		methods: {
			// 选择公司
			selectItem(item){
				uni.setStorageSync("enterpriseId", item.enterpriseId)
				uni.navigateBack()
			},
			//公司列表
			getCompanyList(idCard){	
				companyList({idCard}).then((res)=>{
					if(res[1].respCode === 'FJKBP0000' && res[1].respCode !==null){
						this.companyList = res[1].data
					}
				})
			},
			//清除
			clear(){
				this.search = ''
			},
			// 模糊查询
			searchvalue (list, keyWord){
			    if (keyWord !== "") {
			      
			      var reg = new RegExp(keyWord);
			      var arr = [];
			      for (var i = 0; i < list.length; i++) {
							//这里匹配的是数组中需要的的内容，可根据业务需求自行修改！
			        if (reg.test(list[i].enterpriseName)) {
			          arr.push(list[i]);
			        }
			      }
			      return arr;  //返回符合条件的数组
			    } 
			  },
	},
	}
</script>

<style lang="scss">
	
	.container{
		position: relative;
		width: 100%;
		.list{
			// margin-top: 50rpx;
			border-top: 1px solid #E5E5E5;
			border-bottom: 1px solid #E5E5E5;
			&_item{
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 90rpx;
				margin: 0 32rpx;
			}
		}
		
		// search
		.search_box{
			padding: 12rpx 32rpx 24rpx 32rpx;
			// padding: 0 32rpx;
			.search{
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				background: #F1F1F1;
				width: 100%;
				height: 64rpx;
				border-radius: 32rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				input{
					flex: 1;
					height: 32rpx;
					font-size: 32rpx;
					line-height: 32rpx;
					background: #F1F1F1;
					display: block;
				}
				&_btn{
					width: 40rpx;
					height: 40rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.clear_btn{
					position: relative;
					width: 64rpx;
					height: 64rpx;
					icon{
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
</style>